<template>
  <div class="layout">
    <div class="space"></div>
    <div class="header">
      <!--<img class="avatar" :src="detail.avatar"/>-->
      <span class="title" v-text="detail.title"></span>
    </div>
    <div class="space"></div>
    <div class="container">
      <div class="moneyBlock">
        <span class="moneyTip" style="margin-left:10px" v-text="moneyTip">123</span>
        <span class="money" style="margin-right: 10px" v-text="getMoney"></span>
      </div>
      <div class="divider"></div>
      <qcell style="width: 92vw" text-left="当前状态" v-if="detail.state" :text-right="detail.state"/>
      <qcell style="width: 92vw" text-left="来自" v-if="detail.from" :text-right="detail.from"/>
      <qcell style="width: 92vw" text-left="收款方" v-if="detail.to" :text-right="detail.to"/>
      <qcell style="width: 92vw" text-left="ID" v-if="detail.id" :text-right="detail.id"/>
      <qcell style="width: 92vw" text-left="卡号" v-if="detail.cardNum" :text-right="detail.cardNum"/>
      <!--todo 退货点击-->
      <qcell style="width: 92vw;display: none" text-left="商品？？？？？？？？？"/>
      <qcell style="width: 92vw" text-left="时间" v-if="detail.time" :text-right="detail.time"/>
      <qcell style="width: 92vw" text-left="说明" v-if="detail.explain" :text-right="detail.explain"/>
      <qcell style="width: 92vw" text-left="交易单号" v-if="detail.orderNum" :text-right="detail.orderNum"/>
    </div>
    <div class="space"></div>
    <div class="flex-c" style="background: white; border-radius: 5px">
      <qcell style="width: 92vw; border-radius: 5px" text-left="提现详情" text-right="点击查看" @click.native="showLog"/>
      <div class="divider"></div>
      <div class="con" v-if="logState">
        <time-line style="width: 92vw; border-radius: 5px" :items="logList"></time-line>
        <div v-if="noMoreLog" class="text-msg">敬请期待更多产品</div>
      </div>
    </div>
    <div style="margin-top: 44px">
      <link-opinion/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import LinkOpinion from '../../components/common/LinkOpinion';
  import Types from '../../pages/user/WithdrawType';
  import Moment from 'moment';
  import TimeLine from '../../components/common/timeLine';

  export default {
    /** kebab-case */
    name: 'withdraw-detail',
    components: {TimeLine, LinkOpinion},
    data() {
      return {
        detail: JSON.parse(this.$route.query.msg),
        logList: [],
        logState: false
        // detail: {
        // type: '4',
        // avatar: 'https://ws1.sinaimg.cn/large/4c2afb0bly1frbzpdpyu2j20go0gogmc.jpg',
        // money: (Math.random() - 0.5) + '',
        // title: '标题',
        // state: '状态',
        // explain: '说明',
        // orderNum: '订单号',
        // goods: '商品',
        // from: '转出人',
        // to: '收款人',
        // id: 'id',
        // cardNum: '卡号',
        // time: 'time'
        // }
        // todo goods对应为产品退款时 可点击查看商品
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {},
    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
      showLog() {
        this.logState = !this.logState;
      }
    },
    computed: {
      moneyTip() {
        let moneyTip = '';

        switch (this.detail.type) {
          case Types.PAY:
            moneyTip = '转出金额';
            break;

          case Types.RETURN:
            moneyTip = '退款金额';
            break;

          case Types.TRANSFER:
            moneyTip = '转入金额';

            break;
          case Types.WITHDRAW:
            moneyTip = '提现金额';
            break;

          // 目前仅有微信 微信为特殊情况
          case Types.WX:
            moneyTip = '提现金额';
            break;
          default:
            moneyTip = '不确定类型金额';
            break;
        }

        return moneyTip;
      },
      getMoney() {
        return this.detail.money;
      },
      noMoreLog() {
        return this.logList.length <= 0;
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      this.detail.log.forEach((item) => {
        this.logList.push({content: item.des, time: this.dateFormat(new Date(item.time * 1000))});
      });
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()
    width vw(325)
    height vw(2)

  .space
    space()

  .layout
    flex-y()
    margin vw(15)

  .header
    flex-x()
    background-color white
    width vw(345)
    border-radius vw(5)
    height cell-height
    justify-content flex-start

  .avatar
    width 8vw
    margin-left 10px
    margin-right 10px
    border-radius(4vw)

  .title
    word-vw(14, first-ash)
    margin-left vw(10)

  .container
    flex-y()
    background-color white
    width vw(345)
    border-radius vw(5)

  .moneyBlock
    flex-x()
    height 18vw
    width vw(345)

  .moneyTip
    word(16px, third-ash)

  .money
    word(25px, first-ash)

  .text-msg
    word-vw(12, third-ash);
    flex-center();
    padding 1vw 0
    width vw(345)
    border-radius vw(5)
</style>
